<script setup>
import request from '@/utils/request'
import settings from '@/utils/settings'
import Cache from '@/views/monitor/cache/index.vue'
import * as echarts from 'echarts';
import {onBeforeMount, onMounted, reactive, ref} from 'vue'
// const systemStore = useSystemStore()
// 系统参数
const systemInformation = reactive({})
// 用户总数
const userSize = ref(0)
// 角色总数
const roleSize = ref(0)
// 权限（菜单）总数
const permissionSize = ref(0)
// 记录总数
const recordSize = ref(0)
// 公告内容
const notices = reactive({})
// 系统简介
const about = settings.about

// 获取用户总数
const handleGetUserSize = async () => {
  const res = await request.get('/user')
  userSize.value = ref(res.data.length)
}
handleGetUserSize()
// 获取角色总数
const handleGetRoleSize = async () => {
  const res = await request.get('/role')
  roleSize.value = ref(res.data.length)
}
handleGetRoleSize()
// 获取权限（菜单）总数
const handleGetPermissionSize = async () => {
  const res = await request.get('/permission')
  permissionSize.value = ref(res.data.length)
}
handleGetPermissionSize()
// 获取记录总数
const handleGetRecordSize = async () => {
  const res = await request.get('/record')
  recordSize.value = ref(res.data.length)
}
handleGetRecordSize()
// 获取所有公告
const handleGetNotices = async () => {
  const res = await request.get('/notice')
  Object.assign(notices, res.data)
}
handleGetNotices()
onMounted(async ()=>{
  const res=await request.get('/log/echarts')
  console.log(res.data)

  const chartDom = document.getElementById('main');
  const myChart = echarts.init(chartDom);
  let option;

  option = {
    title: {
      text: '最近30天系统数据访问量',
      subtext: 'from系统日志',
      left: 'center'
    },
    xAxis: {
      type: 'category',
      data: res.data.dates
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: res.data.counts,
        type: 'line',
        smooth: true
      }
    ]
  };

  option && myChart.setOption(option);

})
</script>

<template>
  <el-row>
    <el-col :span="5" class="statistic">
      <el-statistic :value="userSize">
        <template #title>
          <div
            style="display: inline-flex; align-items: center; font-size: 16px; text-align: center"
          >
            <el-icon :size="16">
              <User />
            </el-icon>
            用户总数
          </div>
        </template>
      </el-statistic>
    </el-col>
    <el-col :span="5" class="statistic">
      <el-statistic :value="roleSize">
        <template #title>
          <div style="display: inline-flex; align-items: center; font-size: 16px">
            <el-icon :size="16">
              <UserFilled></UserFilled>
            </el-icon>
            角色总数
          </div>
        </template>
      </el-statistic>
    </el-col>
    <el-col :span="5" class="statistic">
      <el-statistic :value="permissionSize">
        <template #title>
          <div style="display: inline-flex; align-items: center; font-size: 16px">
            <el-icon :size="16">
              <Menu />
            </el-icon>
            权限总数
          </div>
        </template>
      </el-statistic>
    </el-col>
    <el-col :span="5" class="statistic">
      <el-statistic :value="recordSize">
        <template #title>
          <div style="display: inline-flex; align-items: center; font-size: 16px">
            <el-icon :size="16">
              <Files />
            </el-icon>
            构建总数
          </div>
        </template>
      </el-statistic>
    </el-col>
  </el-row>

<!--  <div id="main" style="width: 1200px;height: 500px"></div>-->

  <el-row :gutter="20">
    <el-col >
      <Cache></Cache>
    </el-col>
    <el-col>
      <h1>系统公告</h1>

      <div>
        <el-collapse accordion>
          <el-collapse-item v-for="item in notices" :title="item.name" :name="item.id">
            <div>{{ item.createTime }}</div>
            <div v-html="item.content"></div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-col>

  </el-row>


</template>

<style scoped lang="scss">
h1 {
  color: #333;
  font-size: 16px;
  font-weight: bolder;
  line-height: 50px;

}

p {
  color: #666;
  font-size: 16px;
  margin: 10px;
  line-height: 1.5; /* 设置行间距为1.5倍字体大小 */
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
}
ul {
  list-style: none; /* 移除默认的列表符号 */
  margin: 0;
  padding: 0;
}

li {
  color: #666;
  font-size: 16px;
  line-height: 1.5; /* 设置行间距为1.5倍字体大小 */
  margin-left: 10px;
}
ul:not(:first-child) {
  margin-left: 40px; /* 后两个 ul 向左对齐 */
}

.statistic {
  text-align: center;
}
</style>
